<!-- DoctorList.vue -->
<template>
  <div class="appointment-page">
    <el-row :gutter="20" class="doctor-list">
      <el-col v-for="doctor in doctorList" :key="doctor.doctorId" :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="doctor-card">
          <img :src="doctor.avatar" class="avatar" />
          <div class="name">{{ doctor.doctorName }}</div>
          <div class="phone">{{ doctor.phoneNumber }}</div>
          <div class="schedule">
            <el-button type="primary" size="large" class="appointment-button" @click="openDialog(doctor)">
              预约
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 预约弹窗 -->
    <AppointmentDialog :visible="dialogVisible" @update:visible="val => (dialogVisible = val)"
      :doctor="currentDoctor" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AppointmentDialog from './AppointmentDialog.vue'
import { getDoctorList } from '@/api/appointment'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const currentDoctor = ref(null)
const doctorList = ref([])

const openDialog = (doctor) => {
  currentDoctor.value = doctor
  dialogVisible.value = true
}

onMounted(async () => {
  try {
    //发起请求获取医生列表
    const { data } = await getDoctorList()
    doctorList.value = data
  } catch (error) {
    ElMessage.error('请求医生列表出错:', error)
  }
})
</script>

<style scoped>
.appointment-page {
  padding: 20px;
}

.doctor-list {
  margin-top: 10px;
}

.doctor-card {
  text-align: center;
  padding: 20px;
  border-radius: 12px;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.name {
  font-size: 16px;
  font-weight: bold;
  margin-top: 4px;
}

.phone {
  font-size: 14px;
  color: #999;
  margin-bottom: 12px;
}

.schedule {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.appointment-button {
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 8px;
}
</style>
